@function tovmin($rpx) {
  //$rpx为需要转换的字号
  @return #{$rpx * 100 / 750}vmin;
}

.liveInteraction_box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  line-height: 1;
  position: relative;
  display: flex;
  flex-direction: column;

  .liveInteraction_socket_loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    .liveInteraction_socket_exit {
      color: #105cfb;
      text-decoration: underline;
    }
  }

  .liveInteraction_icon_box {
    width: 36px;
    height: 36px;
    position: absolute;
    z-index: 102;
    display: block;
  }

  .liveInteraction_top_fixed {
    position: absolute;
    top: 24px;
    left: 28px;
    right: 28px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 103;

    .liveInteraction_top_profile {
      width: 402px;
      height: 72px;
      background: rgba(39, 37, 37, 0.3);
      border-radius: 36px;
      display: flex;
      align-items: center;

      .liveInteraction_profile_img {
        width: 64px;
        height: 64px;
        margin-left: 4px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .liveInteraction_profile_name {
        margin-left: 18px;
        margin-right: 8px;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        flex: 1;
      }
    }

    .liveInteraction_top_right {
      display: flex;
      align-items: center;
      justify-items: flex-end;

      .liveInteraction_top_share {
        width: 48px;
        height: 48px;
        background: rgba(39, 37, 37, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: url(https://wx.gy.cn/wechatImage/liveImage_16.png) no-repeat;
        background-size: 100% 100%;
      }

      .liveInteraction_top_look {
        padding: 8px 18px;
        background: rgba(39, 37, 37, 0.3);
        border-radius: 8px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 34px;
        letter-spacing: 1px;
        margin-right: 8px;
      }
    }
  }

  .adm-popup-body {
    border-radius: 12px 12px 0px 0px;
  }

  .liveInteraction_playerRead_box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #313233;
    display: flex;
    z-index: 105;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 600;
    color: #ffffff;
  }

  .liveInteraction_primary-btn {
    margin-left: 12px;
    border-radius: 12px;
    color: rgba(22, 119, 255, 1);
    text-decoration: underline;
  }

  .liveInteraction_sp_box {
    width: 100%;
    height: 100%;
    position: relative;

    .liveInteraction_content_height {
      height: 0px !important;
    }

    .liveInteraction_content_sp {
      top: 568px;
      position: fixed;
      bottom: 100px;
    }

    .liveInteraction_Send {
      background: url(https://wx.gy.cn/wechatImage/liveImage_47.png) no-repeat;
      background-size: 100% 100%;
    }

    .liveInteraction_icon_hpPosition {
      right: 30px;
      top: 196px;
      background: url(https://wx.gy.cn/wechatImage/icon44.png) no-repeat;
      background-size: 100% 100%;
    }

    .liveInteraction_icon_spPosition {
      top: 196px;
      right: 30px;
      background: url(https://wx.gy.cn/wechatImage/icon45.png) no-repeat;
      background-size: 100% 100%;
    }

    .liveInteraction_bottom {
      background: transparent;
      box-shadow: none;
    }

    .liveInteraction_input {
      background: rgba(255, 255, 255, 0.1) !important;
    }

    .adm-input-element {
      color: rgba(255, 255, 255, 1);
    }

    input::placeholder {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .liveInteraction_hp_box {
    width: 100%;
    height: 100%;
    position: relative;

    .liveInteraction_content_hp {
      top: tovmin(222) !important;
      bottom: tovmin(80);
      position: fixed;
      width: tovmin(800) !important;
      padding: tovmin(20) tovmin(56) 0;
      z-index: 1000000001;

      .liveInteraction_live_desc {
        padding: tovmin(9) !important;
        font-size: tovmin(26) !important;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c5ddff;
        line-height: tovmin(36) !important;
        background: rgba(0, 0, 0, 0.3);
        max-width: tovmin(626) !important;
      }

      .liveInteraction_content_height {
        height: tovmin(64) !important;
      }

      .liveInteraction_bottom {
        background: transparent !important;
        box-shadow: none !important;
        height: tovmin(200);
        position: relative !important;
      }
    }

    .liveInteraction_top_fixed {
      height: tovmin(36) !important;
      top: tovmin(12) !important;
    }

    .liveInteraction_top_profile {
      width: tovmin(163);
      height: tovmin(33);
      background: rgba(39, 37, 37, 0.3);
      border-radius: tovmin(17);
      font-size: tovmin(13);
      font-weight: 600;

      .liveInteraction_profile_img {
        width: tovmin(32) !important;
        height: tovmin(32) !important;
      }

      .liveInteraction_profile_name {
        font-size: tovmin(13);
      }
    }

    .liveInteraction_top_look {
      padding: tovmin(4) tovmin(8) !important;
      font-size: tovmin(11) !important;
      line-height: tovmin(16) !important;
    }

    .liveInteraction_top_share {
      width: tovmin(22) !important;
      height: tovmin(22) !important;
    }

    .liveInteraction_bottom {
      background: transparent;
      box-shadow: none;
      position: relative !important;
    }

    .liveInteraction_input {
      background: rgba(255, 255, 255, 0.1) !important;
      width: tovmin(406) !important;
      height: tovmin(48) !important;
      font-size: tovmin(24) !important;
      position: fixed;
      z-index: 1000000002;
      bottom: tovmin(30);
      left: tovmin(64);
    }

    .adm-input-element {
      font-size: tovmin(12) !important;
      color: rgba(255, 255, 255, 1);
    }

    input::placeholder {
      color: rgba(255, 255, 255, 0.8);
      font-size: tovmin(11);
    }

    .liveInteraction_Outline {
      margin-left: 0;
      position: fixed;
      z-index: 1000000002;
      bottom: tovmin(36);
      right: tovmin(268);
      width: tovmin(48) !important;
      height: tovmin(48) !important;
      background: url(https://wx.gy.cn/wechatImage/liveImage_13.png) no-repeat;
      background-size: 100% 100%;
      display: block !important;
    }

    .liveInteraction_OutShop {
      position: fixed;
      z-index: 1000000002;
      bottom: tovmin(36);
      right: tovmin(186);
      margin-left: 0 !important;
      width: tovmin(48) !important;
      height: tovmin(48) !important;
      font-size: tovmin(22) !important;
      display: block !important;
      line-height: tovmin(64);
      background: url(https://wx.gy.cn/wechatImage/liveImage_14.png) no-repeat;
      background-size: 100% 100% !important;
    }

    .liveInteraction_Send {
      position: fixed;
      z-index: 1000000002;
      bottom: tovmin(36);
      right: tovmin(102);
      width: tovmin(48) !important;
      height: tovmin(48) !important;
      display: block !important;
      background: url(https://wx.gy.cn/wechatImage/liveImage_47.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .liveInteraction_live_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: tovmin(422);

    .liveInteraction_icon_hpPosition {
      right: tovmin(30);
      top: tovmin(368);
      background: url(https://wx.gy.cn/wechatImage/icon44.png) no-repeat;
      background-size: 100% 100%;
    }

    .liveInteraction_icon_spPosition {
      top: tovmin(368);
      right: tovmin(30);
      background: url(https://wx.gy.cn/wechatImage/icon45.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .liveInteraction_content {
    flex: 1;
    overflow-y: scroll;
    padding: tovmin(20) tovmin(28) tovmin(24);

    .liveInteraction_content_height {
      height: tovmin(128);
    }
  }

  .liveInteraction_live_getOut {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
    line-height: 44px;
    text-align: center;

    .liveInteraction_live_outOne {
      padding-top: 168px;
    }
  }

  .liveInteraction_live_starlive {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
    line-height: 44px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .liveInteraction_live_start {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
    line-height: 44px;
    text-align: center;

    .liveInteraction_live_starContent {
      text-align: center;
      font-size: 30px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 600;
      color: #ffffff;
      line-height: 46px;

      .liveInteraction_live_startTitle {
        padding-top: 98px;
      }

      .liveInteraction_live_startTime {
        margin-top: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 34px;

        .liveInteraction_live_startTimeBox {
          padding: 4px 6px;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 4px;
          border: 1px solid rgba(255, 255, 255, 0.5);
          margin-right: 10px;
        }

        .liveInteraction_live_startTimeSize {
          margin-right: 10px;
        }
      }

      .liveInteraction_live_btn {
        width: 208px;
        height: 76px;
        background: #1677ff;
        border-radius: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        margin: 32px auto 0;
      }

      .liveInteraction_live_btn::before {
        width: 30px;
        height: 24px;
        content: "";
        display: block;
        background: url(https://wx.gy.cn/wechatImage/liveImage_16.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 12px;
      }
    }
  }

  .liveInteraction_img {
    width: 120px;
    height: 120px;
  }

  .liveInteraction_live_desc {
    padding: 20px;
    background: #eeeeee;
    border-radius: 20px;
    font-weight: 400;
    color: #65676a;
    line-height: 40px;
    font-size: 28px;
  }

  .liveInteraction_socket {
    padding-top: 24px;
  }

  .liveUser_box {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;

    .liveUser_borderRadius {
      width: 64px;
      height: 64px;
      border-radius: 50%;
    }

    .liveUser_borderRadius img {
      width: 100%;
      height: 100%;
    }

    .liveUser_username {
      margin-left: 16px;

      .liveUser_name {
        color: #333333;
        font-size: 24px;
      }

      .liveUser_content {
        max-width: 480px;
        margin-top: 24px;
        padding: 24px;
        background: #ffffff;
        border-radius: 20px;
        opacity: 1;
      }
    }
  }

  .liveUserInfo_box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-bottom: 24px;

    .liveUserInfo_borderRadius {
      width: 64px;
      height: 64px;
      border-radius: 50%;
    }

    .liveUserInfo_borderRadius img {
      width: 100%;
      height: 100%;
    }

    .liveUserInfo_username {
      margin-right: 16px;

      .liveUserInfo_name {
        color: #333333;
        font-size: 24px;
        text-align: right;
      }

      .liveUserInfo_content {
        max-width: 480px;
        margin-top: 24px;
        padding: 24px;
        background: #ffffff;
        border-radius: 20px;
        opacity: 1;
      }
    }
  }

  .liveInteraction_bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 24px;
    padding: 24px 24px 48px;
    background: #ffffff;
    box-shadow: inset 0px 2px 0px 0px #eeeeee;

    .liveInteraction_input {
      width: 440px;
      height: 60px;
      font-size: 24px;
      background: #f7f7f7;
      border-radius: 32px;
      padding: 0 24px;

      .adm-input-element {
        font-size: 24px;
      }
    }
  }

  .liveInteraction_Outline {
    width: 48px;
    height: 48px;
    margin-left: 40px;
    background: url(https://wx.gy.cn/wechatImage/liveImage_13.png) no-repeat;
    background-size: 100% 100%;
  }

  .liveInteraction_OutShop {
    width: 48px;
    height: 48px;
    margin-left: 40px;
    background: url(https://wx.gy.cn/wechatImage/liveImage_14.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    line-height: 64px;
    text-align: center;
  }

  .liveInteraction_Send {
    width: 48px;
    height: 48px;
    margin-left: auto;
    background: url(https://wx.gy.cn/wechatImage/liveImage_15.png) no-repeat;
    background-size: 100% 100%;
  }

  .liveInteraction_shop_card {
    position: absolute;
    right: 32px;
    bottom: 240px;
    color: #105cfb;
    font-size: 56px;
  }
}

.maskPrize_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 474px;
  height: 600px;
  border-radius: 16px;
  text-align: center;

  .maskPrize_content {
    width: 474px;
    height: 530px;
    background: url(https://wx.gy.cn/wechatImage/liveImage_29.png) no-repeat;
    background-size: 100% 100%;

    .maskPrize_content_title {
      padding: 172px 0 0;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #805945;
      line-height: 44px;
    }

    .maskPrize_content_logo {
      width: 130px;
      height: 130px;
      margin: 24px auto 0;
    }

    .maskPrize_content_btn {
      margin-top: 84px;
      padding: 0 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .maskPrize_content_prople {
      font-size: 24px;
      color: #ffffff;
      margin-top: 12px;
      text-decoration: underline;
    }

    .maskPrize_content_myGift {
      font-size: 24px;
      color: #ffffff;
      margin-top: 12px;
      text-decoration: underline;
    }

    .maskPrize_content_error {
      background: url(https://wx.gy.cn/wechatImage/liveImage_30.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .maskPrize_close {
    width: 52px;
    height: 52px;
    background: url(https://wx.gy.cn/wechatImage/liveImage_32.png) no-repeat;
    background-size: 100% 100%;
    margin: 32px auto 0;
  }
}

.maskPrize_box_hp {
  width: tovmin(474);
  height: tovmin(600);


  .maskPrize_content {
    width: tovmin(474);
    height: tovmin(530);
    background: url(https://wx.gy.cn/wechatImage/liveImage_29.png) no-repeat;
    background-size: 100% 100%;

    .maskPrize_content_title {
      padding: tovmin(172) 0 0;
      font-size: tovmin(32);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #805945;
      line-height: tovmin(44);
    }

    .maskPrize_content_logo {
      width: tovmin(130);
      height: tovmin(130);
      margin: tovmin(24) auto 0;
    }

    .maskPrize_content_btn {
      margin-top: tovmin(84);
      padding: 0 tovmin(32);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .maskPrize_content_prople {
      font-size: tovmin(24);
      color: #ffffff;
      margin-top: tovmin(12);
      text-decoration: underline;
    }

    .maskPrize_content_myGift {
      font-size: tovmin(24);
      color: #ffffff;
      margin-top: tovmin(12);
      text-decoration: underline;
    }

    .maskPrize_content_error {
      background: url(https://wx.gy.cn/wechatImage/liveImage_30.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .maskPrize_close {
    width: tovmin(52);
    height: tovmin(52);
    background: url(https://wx.gy.cn/wechatImage/liveImage_32.png) no-repeat;
    background-size: 100% 100%;
    margin: tovmin(16) auto 0;
  }
}

.maskPeople_box {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 520px;
  height: 527px;

  background: #ffffff;
  border-radius: 16px;
  text-align: center;

  .maskPeople_content {
    padding: 32px;
    text-align: center;

    .maskPeople_content_title {
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #313233;
      line-height: 44px;
    }

    .maskPeople_content_userBox {
      height: 350px;
      overflow-y: scroll;

      .maskPeople_content_user {
        margin-bottom: 24px;
        display: flex;
        align-items: center;

        .maskPeople_content_profile {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          flex-shrink: 0;
        }

        .maskPeople_content_username {
          margin-left: 20px;
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #313233;
          flex-shrink: 0;
        }

        .maskPeople_content_prizeName {
          margin-left: 108px;
          flex: 1;
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #65676a;
        }
      }
    }
  }

  .MaskPeople_close {
    width: 52px;
    height: 52px;
    background: url(https://wx.gy.cn/wechatImage/liveImage_32.png) no-repeat;
    background-size: 100% 100%;
    margin: 32px auto 0;
  }
}

.maskPeople_box_hp {
  width: tovmin(520);
  height: tovmin(528);
  margin-top: -tovmin(264);
  margin-left: -tovmin(260);

  .maskPeople_content {
    padding: tovmin(32);
    text-align: center;

    .maskPeople_content_title {
      font-size: tovmin(32);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #313233;
      line-height: tovmin(44);
    }

    .maskPeople_content_userBox {
      height: tovmin(350);
      overflow-y: scroll;

      .maskPeople_content_user {
        margin-bottom: tovmin(24);
        display: flex;
        align-items: center;

        .maskPeople_content_profile {
          width: tovmin(72);
          height: tovmin(72);
          border-radius: 50%;
          flex-shrink: 0;
        }

        .maskPeople_content_username {
          margin-left: tovmin(20);
          font-size: tovmin(28);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #313233;
          flex-shrink: 0;
        }

        .maskPeople_content_prizeName {
          margin-left: tovmin(108);
          flex: 1;
          font-size: tovmin(24);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #65676a;
        }
      }
    }
  }

  .MaskPeople_close {
    width: tovmin(56);
    height: tovmin(26);
    background: url(https://wx.gy.cn/wechatImage/liveImage_32.png) no-repeat;
    background-size: 100% 100%;
    margin: tovmin(32) auto 0;
  }
}

.maskGift_box {
  .maskGift_box_title {
    width: tovmin(254);
    height: tovmin(56);
    margin: 0 auto;
    background: url(https://wx.gy.cn/wechatImage/liveImage_35.png) no-repeat;
    background-size: 100% 100%;
  }

  .maskGift_box_image {
    width: tovmin(602);
    height: tovmin(562);
    margin: tovmin(24) auto 0;
    background: url(https://wx.gy.cn/wechatImage/liveImage_36.png) no-repeat;
    background-size: 100% 100%;

    .maskGift_box_imageDesc {
      text-align: center;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #f4fafe;
      line-height: 44px;
      padding-top: 2px;
    }
  }
}

.maskGift_hp_box {
  .maskGift_box_title {
    width: tovmin(127);
    height: tovmin(28);
    margin: 0 auto;
    background: url(https://wx.gy.cn/wechatImage/liveImage_35.png) no-repeat;
    background-size: 100% 100%;
  }

  .maskGift_box_image {
    width: tovmin(301);
    height: tovmin(281);
    margin: tovmin(12) auto 0;
    background: url(https://wx.gy.cn/wechatImage/liveImage_36.png) no-repeat;
    background-size: 100% 100%;

    .maskGift_box_imageDesc {
      text-align: center;
      font-size: tovmin(16);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #f4fafe;
      line-height: tovmin(22);
      padding-top: tovmin(1);
    }
  }
}